<template>
  <view class="wrap" v-if="showPage">
    <!-- #ifdef WEB -->
    <uv-status-bar></uv-status-bar>
    <view class="appNav">
      <view class="left">
        <view class="logo"><image src="../../static/logo.png" class="img"></image></view>
        <view class="name">投研宝</view>
      </view>
      <button hover-class="none" class="btn" @click="goApp">去app查看</button>
    </view>
    <uv-line color="#EFEFEF"></uv-line>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <uv-navbar leftText="" title="" leftIconColor='#FFFFFF' bgColor='rgba(0,0,0,0)' fixed safeAreaInsetTop autoBack titleStyle='color: #000000'>
      <template v-slot:right>
        <view class="nav-right" @click="nowShare([1,2,3,4,6])">
          <image src="../../static/share.png" class="img"></image>
        </view>
      </template>
    </uv-navbar>
    <!-- #endif -->
    <view class="video">
      <image :src="setUrl(detail.thumb)" mode="aspectFill" class="img"></image>
    </view>
    <view class="box">
      <view class="gost">
        <view class="item" :class="{ active: active == 0 }" @click="active = 0">
          <image src="../../static/nt1.png" class="ke1 ke" v-if="active == 0"></image>
          <image src="../../static/nt1-1.png" class="ke1 ke" v-if="active == 1"></image>
          <view class="font">简介</view>
        </view>
        <view class="item" :class="{ active: active == 1 }" @click="active = 1">
          <image src="../../static/nt2.png" class="ke2 ke" v-if="active == 1"></image>
          <image src="../../static/nt2-2.png" class="ke2 ke" v-if="active == 0"></image>
          <view class="font">大纲</view>
        </view>
      </view>
      <template v-if="active == 0">
        <detailLeft :comment="comment" :detail='detail'></detailLeft>
      </template>
      <template v-if="active == 1">
        <detailRight :lines='lines'></detailRight>
      </template>
      <!-- #ifdef APP-PLUS -->
      <view class="footer">
        <view class="pox">
          <view class="left" @click="setCollect(detail)">
            <view class="icon">
              <image src="../../static/tip1-1.png" class="img" v-if="detail.isCollect"></image>
              <image src="../../static/tip1.png" class="img" v-else></image>
            </view>
            <view class="font">收藏</view>
          </view>
          <button class="btn" hover-class="none" @click="goDetail">
            {{ detail.buyLog != null ? '立即观看' : '立即购买' }}
          </button>
        </view>
        
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <!-- #endif -->
      <!-- #ifdef WEB -->
      <view class="footer">
        <view class="pox">
          <button class="btn w100" hover-class="none" @click="goApp"> 去app查看 </button>
        </view>
        
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <!-- #endif -->
      <view class="safe"></view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <share ref="onShare" :show='showLeng' @click="getShare"></share>
  </view>
</template>

<script setup>
import detailLeft from '../../components/lesearch/detailLeft.vue';
import detailRight from '../../components/lesearch/detailRight.vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { get, post } from '@/api';
import { setUrl, checkServe } from '@/common';

const onShare = ref(null);
let id = '';
let active = ref(0);
let detail = ref({});
let lines = ref([]);
let comment = ref([]);
let last_page = 0;
let page = 1;
let showPage = ref(false);
let showLeng = ref([]);

onLoad((option) => {
  id = option.id;
})
onShow(() => {
  setTimeout(() => {
    getList();
    page = 1
    comment.value = [];
    getComment();
    getOutLine();
  }, 100)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  getComment();
})

function getList(){
  get('api/lesson/getLessonDetails', { lessonId: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
      showPage.value = true;
    }
  })
}
function getComment(){
  const params = {
    lessonId: id,
    page,
    pagePer: 15,
    order: 'desc'
  }
  get('/api/lesson/getLessonComments', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      comment.value = [...comment.value, ...data.data];
    }
  })
}
function getOutLine(){
  get('/api/lesson/getLessonOutline', { lessonId: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      lines.value = data;
    }
  })
}
function setCollect(){
  const params = {
    lessonId: id
  }
  post('/api/lesson/collectLesson', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value.isCollect = data ? true : false;
    }
  })
}
function nowShare(row){
  showLeng.value = row;
  onShare.value.open();
}
// 分享
function getShare(row){
  if(row.id == 5) toast('开发中...');
  
  let title = detail.value.title;
  let summary = detail.value.profile;
  let href = `${uni.$uv.http.config.webUrl}/pages/research/detail?id=${id}`;
  let imageUrl = setUrl(detail.value.thumb);
  
  if(row.id == 6) {
    uni.setClipboardData({
    	data: href,
    	success: function () {
    		toast('复制成功');
    	}
    });
    onShare.value.close();
    return;
  }
  function goShare(){
    let scene = {
      1: 'WXSceneSession',
      2: 'WXSceneTimeline'
    }
    uni.share({
      provider: row.share,
      scene: scene[row.id],
      type: 0,
      href,
      title,
      summary,
      imageUrl,
      success(res) {
        console.log(JSON.stringify(res));
        console.log('分享成功');
      },
      fail(err) {
        console.log(JSON.stringify(err));
        console.log('分享失败');
      },
      complete() {
        console.log('初始化');
      }
    })
  }
  onShare.value.close();
  checkServe('share', row.share, goShare);
}
function goDetail(){
  const row = detail.value;
  if(row.buyLog != null){
    uni.navigateTo({
      url: `/pages/research/videoDetail?id=${id}`
    });
  }else{
    uni.navigateTo({
      url: `/pages/research/cashier?id=${id}`
    });
  }
}
// 跳转app
function goApp(){
  // #ifdef WEB
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('micromessenger') !== -1) {
    msg = '请点击右上角，在浏览器打开';
    modal.value.open();
  } else {
    let route = `/pages/research/detail?id=${id}`
    location.href = 'touyanbao://' + route
    noApp();
  }
  // #endif
}
// 无响应或者没安装跳转下载
let timer = null;
function noApp() {
	console.log("===========》noApp");
	var t = Date.now(),
		r = 'https://www.xcxwo.com/QfvDcS';
	timer = setTimeout(function() {
    console.log(document.hidden);
    console.log(document.webkitHidden);
		return Date.now() - t > 3200 ? (clearTimeout(timer), !1) : !document.webkitHidden &&!document.hidden &&void(location.href = r);
	}, 3000);
}
</script>

<style lang="scss" scoped>
  .appNav{
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .logo{
        width: 60rpx;
        height: 60rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
      .name{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-left: 20rpx;
      }
    }
    .btn{
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #FFFFFF;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .pox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
        .font{
          font-weight: 500;
          font-size: 30rpx;
          color: #000000;
          padding-left: 20rpx;
        }
        .icon{
          width: 40rpx;
          height: 37rpx;
          font-size: 0;
        }
      }
      .btn{
        font-size: 34rpx;
        width: 432rpx;
        &.w100{
          width: 100%;
        }
      }
    }
  }
  .box{
    position: relative;
    top: -40rpx;
    width: 100%;
    background-color: #fff;
    height: calc(100vh - 450rpx);
    border-top-left-radius: 35rpx;
    border-top-right-radius: 35rpx;
    .gost{
      width: 100%;
      padding: 0 30rpx;
      padding-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item{
        width: 48%;
        height: 72rpx;
        line-height: 72rpx;
        background-image: linear-gradient(90deg, rgba($color: #FF312E, $alpha: 0.18) 0%, rgba($color: #FF7E7A, $alpha: 0.18) 100%);
        border-radius: 15rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active{
          background-image: linear-gradient(90deg, rgba($color: #FF312E, $alpha: 1) 0%, rgba($color: #FF7E7A, $alpha: 1) 100%);
          .font{
            color: #FFFFFF;
          }
        }
        .ke1{
          width: 35rpx;
          height: 35rpx;
        }
        .ke2{
          width: 23rpx;
          height: 29rpx;
        }
        .ke{
          font-size: 0;
        }
        .font{
          font-weight: 500;
          font-size: 28rpx;
          color: #FF8484;
          padding-left: 20rpx;
        }
      }
    }
  }
  .video{
    width: 100%;
    height: 442rpx;
    background-color: #F5F5F5;
    position: relative;
  }
  .nav-right{
    width: 40rpx;
    height: 40rpx;
    font-size: 0;
  }
</style>